<template>
	<view class="page">
		<u--form
			:model="model"
			:rules="rules"
			ref="form"
		>
			<u-form-item prop="phone">
				<u--input
					v-model="model.phone"
					placeholder="手机号"
				></u--input>
			</u-form-item>
			<u-form-item prop="password">
				<u--input
					v-model="model.password"
					password
					placeholder="登录密码"
				></u--input>
			</u-form-item>
			<u-form-item prop="code">
				<u-input
				  placeholder="验证码"
				  border="surround"
				 v-model="model.code"
				>
				<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="60"
							changeText="X秒重新获取"
						></u-code>
						<u-button
						:disabled="model.phone.length === 11 ? false : true"
						@click="getCode"
						:text="tips"
						color="#FC2422"
						type="error"
						size="mini"
						:customStyle="{
							paddingLeft: '10rpx',
							paddingRight: '10rpx',
							height: '60rpx'
						}"
						></u-button>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item prop="code1">
				<u--input
					v-model="model.code1"
					placeholder="邀请码(非必填)"
				></u--input>
			</u-form-item>
			<u-form-item prop="code2">
				<u-input
				  placeholder="验证码"
				  border="surround"
				 v-model="model.code2"
				>
				<template slot="suffix">
						<dl-verification 
						@tap="changeCode"
						ref="code"
						height="50rpx"
						 @change="onCodeChange" />
					</template>
				</u-input>
			</u-form-item>
		</u--form>
		<u-gap height="80"></u-gap>
		<u-button text="注册" color="#FC2422" @tap="onSubmit"></u-button>
	</view>
</template>

<script>
	import DlVerification from '@/components/dl-verification/index.vue'
	import {getCodeApi,registerApi} from '@/api/user.js'
	export default {
		components: {
			DlVerification
		},
		data() {
			return {
				tips: '',
				model: {
					phone: '',
					password: '',
					code: '',
					code1: '',
					code2: ''
				},
				rules:{
					phone: {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写登录密码',
						trigger: ['blur', 'change']
					},
					code: {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					code2: {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}
				},
				currentCode: 0
			};
		},
		methods: {
			changeCode() {
				this.$refs.code.initCode()
			},
			onCodeChange(e) {
				this.currentCode = e
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if(this.$refs.uCode.canGetCode) {
					const res = await getCodeApi({
						mobile: this.model.phone
					})
				}
				this.$refs.uCode.start();
			},
			onSubmit() {
				this.$refs.form.validate().then(async () => {
					// 判断图形验证码
					if(this.model.code2 !== this.currentCode) {
						uni.showToast({
							title: '图形验证码不正确',
							icon: 'none'
						})
						return
					}
					
					const res = await registerApi({
						user_name: this.model.phone,
						password: this.model.password,
						vcode: this.model.code,
						// #ifdef MP-WEIXIN
						platform: 'MP-WEIXIN',
						// #endif
						// #ifdef H5
						platform: 'H5',
						// #endif
						// #ifdef APP-PLUS
						platform: 'APP-PLUS',
						// #endif
						recode: this.model.code1
					})
					if(res.data.is_register) {
						uni.navigateBack()
					}else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				}).catch(errors => {
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	height: 100vh;
	width: 750rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
</style>
